<template>
  <div :id="id" class="chart" :style="style"></div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "false"
    },
    height: {
      type: String,
      default: "false"
    },
    option: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      myChart: ""
    }
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height
      }
    }
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal, true)
          } else {
            this.myChart.setOption(oldVal, true)
          }
        } else {
          this.initChart()
        }
      }
    }
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(document.getElementById(this.id))
      this.myChart.clear()
      this.myChart.setOption(this.option, true)
      this.myChart.off("click")
      this.myChart.on("click", function(params) {
        // console.log(params, '我被点击了')
      })
      const that = this
      window.addEventListener('resize', function() {
        that.myChart.resize()
      })
    }
  },
  mounted() {
    this.initChart()
  },
  created() {}
}
</script>

<style scoped></style>
